<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<fmt:setBundle basename="Messages" />
<title><fmt:message key="Display.ViewMonthlyUsage" /></title>
<link rel="stylesheet" href="jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />

<script src="lib/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.cookie.js" type="text/javascript"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript" src="demo.js"></script>
<script>
	<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript"
	src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* {
	font-family: Verdana;
	font-size: 96%;
}

label {
	width: 10em;
	float: left;
}

label.error {
	float: none;
	color: red;
	padding-left: .5em;
	vertical-align: top;
}

p {
	clear: both;
}

.submit {
	margin-left: 12em;
}

em {
	font-weight: bold;
	padding-right: 1em;
	vertical-align: top;
}
</style>
<script>
	$(document).ready(function() {
		$("#commentForm").validate();
	});
</script>
</head>
<body>
	<img src="img/logo_ISS.jpg" class="logo" />
	<div class="header">
		<div style="float: left; margin: 11px auto 0 auto">
			<h1>
				<fmt:message key="Display.InstituteofSystemScience" />
			</h1>
		</div>
		<div style="float: right; margin: 11px auto 0 auto">
			<h1>
				<fmt:message key="Display.FacilitiesBookingSystem" />
			</h1>
		</div>
	</div>
	<div class="site_content">
		<div class="sidebar_container">
			<div class="sidebar">
				<%@include file="adminSideMenu.jsp" %>
			</div>
		</div>

		<div class="content">

			<form action="LoadMonthlyUsage" method="get">

				<fmt:message key="Display.Month" />
				<select name="Month">
					<option value="January">
						<fmt:message key="Display.Month.January" />
					</option>
					<option value="February">
						<fmt:message key="Display.Month.February" />
					</option>
					<option value="March">
						<fmt:message key="Display.Month.March" />
					</option>
					<option value="April">
						<fmt:message key="Display.Month.April" />
					</option>
					<option value="May">
						<fmt:message key="Display.Month.May" />
					</option>
					<option value="June">
						<fmt:message key="Display.Month.June" />
					</option>
					<option value="July">
						<fmt:message key="Display.Month.July" />
					</option>
					<option value="August">
						<fmt:message key="Display.Month.August" />
					</option>
					<option value="September">
						<fmt:message key="Display.Month.September" />
					</option>
					<option value="October">
						<fmt:message key="Display.Month.October" />
					</option>
					<option value="November">
						<fmt:message key="Display.Month.November" />
					</option>
					<option value="December">
						<fmt:message key="Display.Month.December" />
					</option>
				</select> <input type="submit" value="View" class="ButtonStyle">
			</form>
			<table class="borderAll"
				style="margin: 10px 0 0px 0; background: #FFF; width: 450px; height: 200px; border: 2px; border-style: solid; border-color: #696A6A">
				<tr></tr>
				<tr>
					<th><fmt:message key="Display.FacilityName" /></th>
					<th><fmt:message key="Display.FacilityType" /></th>
					<th><fmt:message key="Display.Usage" /></th>
				</tr>
				<c:forEach var="allbookings" items="${allbooking}"
					varStatus="status">
					<tr class="${status.index%2==0?'even':'odd'}">
						<td class="nowrap">${allbookings.getFacilityName()}</td>
						<td class="nowrap">${allbookings.getFacilityType().getFacilityType()}</td>
						<td class="nowrap">${allbookings.getDuration()}</td>
					</tr>
				</c:forEach>

				<tr>
					<td></td>
					<td><c:url var="toPrint" scope="page" value="ExportCSVServlet">
							<c:param name="Print" value="${allbooking}" />
							<c:param name="Month" value="${ChooseMonth.Month}"></c:param>
						</c:url></td>
					<td colspan="2" align="center"><a href="${toPrint}"
						style="text-decoration: none"><input type="button"
							value=<fmt:message key="Display.Print"/> class="ButtonStyle" /></a></td>

					<!-- <td colspan="2" align="center"><input type="submit"
						value=<fmt:message key="Display.Print"/> class="ButtonStyle" /></td> -->
				</tr>
			</table>
		</div>

	</div>

	<div class="footer" style="align: center">Copyright@ Team3
		Erudites</div>


</body>
</html>